import './OrganizationList.scss'
import { useMount, useRequest } from 'ahooks'
import { Input, message, DatePicker } from 'antd'
import { useState, useEffect } from 'react'
import { useLocation } from 'react-router-dom'

import { Http } from '../../../../Common/Api'
import { parseURLParams } from '../../../../Common/Configure/Common'

const { Search } = Input
const { RangePicker } = DatePicker
export const OrganizationListA01 = ({ OrgEvent, url, noEarch, label, noAll, DateEvent, date }) => {
    const { search } = useLocation()
    const [messageApi, contextHolder] = message.useMessage()
    const [orgList, setOrgList] = useState()
    const [Active, setActive] = useState()

    const [SearchValue, setSearchValue] = useState('')

    const { runAsync: getOrg } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            if (res.total === 0) {
                messageApi.info('暂无匹配数据!')
                OrgEvent.emit()
                return false
            }
            const list = res.list.map(item => ({ label: label ? item[label] : item.tableName, value: item.uuid }))
            let data = []
            if (!noAll) data = [{ label: '全部', value: '00000000-0000-0000-0000-000000000000' }, ...list]
            else data = list
            if (!noEarch)
                data =
                    SearchValue === ''
                        ? [{ label: '全部', value: '00000000-0000-0000-0000-000000000000' }, ...list]
                        : list
            setOrgList(data)
            setActive(data[0]?.value)
            OrgEvent.emit(data[0]?.value)
        },
    })

    useEffect(() => {
        getOrg({ url: url || 'getNongkenOrganizationList', data: { OrganizationUuid: parseURLParams(search).uuid } })
    }, [getOrg, url, SearchValue])

    const [Date, setDate] = useState(date)

    return (
        <div className="OrganizationListA01">
            {contextHolder}
            <div className="Search">
                {!noEarch && (
                    <Search
                        defaultValue={SearchValue}
                        placeholder="输入项目名称相关关键词"
                        allowClear
                        onSearch={setSearchValue}
                    />
                )}
            </div>
            <div className="Date">
                {DateEvent && (
                    <RangePicker
                        value={Date}
                        onChange={e => {
                            setDate(e)
                            DateEvent.emit(e)
                        }}
                    />
                )}
            </div>
            <div className="List">
                {orgList &&
                    orgList.map(({ label, value }) => (
                        <div
                            key={value}
                            className={Active === value ? 'active' : ''}
                            onClick={() => {
                                setActive(value)
                                OrgEvent.emit(value)
                            }}
                        >
                            {label}
                        </div>
                    ))}
            </div>
        </div>
    )
}
